<template>
	<div style="height: 100%;">
		<el-table tooltip-effect="dark" :data="tableData" v-loading.body="listLoading" ref="dataSelectTable" border
			style="width: 100%">
			<el-table-column label="客户名称" prop="entName" width="250">
				<template scope="scope">
					{{scope.row.entName||'--'}}
				</template>
			</el-table-column>
			<el-table-column label="片区">
			</el-table-column>
			<el-table-column label="联系人" prop="contacts">
				<template scope="scope">
					{{scope.row.userName || '--'}} {{scope.row.phoneNum || '--'}}
				</template>
			</el-table-column>
			<el-table-column label="类别">
			</el-table-column>
			<el-table-column label="服务频次">
				<template scope="scope">
					<div>{{null != scope.row.score ? scope.row.score + '分' : '--'}}</div>
					<div v-if="null != scope.row.score">
						<div v-if="scope.row.score >= 0 && scope.row.score < 30">红牌</div>
						<div v-if="scope.row.score >= 30 && scope.row.score < 40">黄牌</div>
						<div v-if="scope.row.score >= 40">蓝牌</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="待办">
				<template scope="scope">
					{{scope.row.tagStr || '--'}}
				</template>
			</el-table-column>
			<el-table-column label="服务">
				<template scope="scope">
					<el-button type="text" @click="toDetail(scope.row)">开始</el-button>
					<el-button type="text" @click="settingEnt(scope.row)">配置</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div v-show="tableData&&tableData.length>0" align="right" style="margin-top: 10px">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page.sync="pageIndex" :page-sizes="[10,20,30,50]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>

		<el-dialog class="edit-dialog" :title="'企业编辑--' + entInfo.entName" :visible.sync="showEdit" width="70%">
			<el-tabs v-model="currentTab">
				<el-tab-pane label="基本信息" name="first">
					<el-form label-position="right" label-width="100px" style="max-width: 800px;margin-top: 16px;"
						:model="customer" ref="customerValidateForm" :rules="customerRules">
						<el-form-item label="联系人：" prop="userName">
							<el-input class="dialog-input" v-model="customer.userName" placeholder="请输入联系人"
								style="width: 300px;"></el-input>
						</el-form-item>
						<el-form-item label="联系电话：" prop="phoneNum">
							<el-input class="dialog-input" v-model="customer.phoneNum" placeholder="请输入联系电话"
								style="width: 300px;"></el-input>
						</el-form-item>
						<el-form-item label="企业类型：">
							<el-checkbox-group v-model="selectDocumentSettingList">
								<el-checkbox :label="item.settingCode" v-for="item in documentSettingList">
									{{item.settingName}}
								</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						<el-form-item align="left">
							<el-button type="primary" class="save" :loading="customerLoading"
								@click="updateEnterpriseInfo">保存</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>

			</el-tabs>
		</el-dialog>

	</div>
</template>

<script>
	let that

	export default {
		name: 'home',
		components: {
		},
		data() {
			return {
				currentTab: 'first',
				height: window.innerHeight,
				tableData: [],
				listLoading: true,
				pageIndex: 1,
				pageSize: 10,
				total: 0,
				params: {
					minScore: null,
					maxScore: null,
					entName: '',
					tagList: []
				},
				customer: {},
				customerRules: {},
				entInfo: '',
				showEdit: false,
				customerLoading: false,
				documentSettingList: [],
				selectDocumentSettingList: [],
			}
		},
		mounted: function() {
			that = this

			that.params.subjectId = that.getQueryString("subjectId")
			that.params.ticketId = that.$store.state.token

			that.getList()
		},
		methods: {

			settingEnt(row) {
				that.entInfo = row
				that.showEdit = true
				that.getDocumentSettingsSelectInfo()
			},

			updateEnterpriseInfo: function() {
				var _this = this;
				this.$refs['customerValidateForm'].validate(function(valid) {
					if (valid) {
						_this.saveDocumentEntSettingsRelation();
						_this.customer.id = that.entInfo.id,
							_this.customerLoading = true;
						that.ajax({
							url: '/facilitator/updateEnterpriseInfo?ticketId=' + that.params.ticketId,
							data: _this.customer,
							success: function(result) {
								if (result.status == 1) {
									_this.$message({
										type: 'success',
										message: '保存成功'
									});
									_this.showEdit = false;
									_this.customerLoading = false;
									that.getDocumentSettingsSelectInfo()
								}
							}
						})
					}
				});
			},

			saveDocumentEntSettingsRelation: function() {
				var _this = this;
				that.ajax({
					url: '/document/saveDocumentEntSettingsRelation?ticketId=' + that.params.ticketId,
					data: JSON.stringify({
						settingCodeList: _this.selectDocumentSettingList
					}),
					contentType: 'application/json',
					dataType: 'json',
					success: function(result) {},
					error: function() {}
				})
			},

			getDocumentSettingsSelectInfo: function() {
				that.ajax({
					url: '/document/getDocumentSettingsSelectInfo?ticketId=' + that.params.ticketId,
					data: JSON.stringify({
						facilitatorId: that.entInfo.id,
					}),
					contentType: 'application/json',
					dataType: 'json',
					success: function(result) {
						if (result.status == 1 && result.data) {
							var documentSettingList = result.data;
							var selectDocumentSettingList = []
							documentSettingList.forEach(function(t) {
								if (t.isSelected) {
									selectDocumentSettingList.push(t.settingCode);
								}
							})
							that.documentSettingList = documentSettingList;
							that.selectDocumentSettingList = selectDocumentSettingList;
						}
					},
					error: function() {}
				})
			},

			//去到详情
			toDetail(item) {
				that.$router.push("/pdfManage?ticketId=" + that.params.ticketId + "&facilitatorId=" + item.id +
					"&subjectId=" + that.params.subjectId)
			},

			getList: function() {
				var _this = this;
				var param = JSON.parse(JSON.stringify(_this.params));
				param.subjectId = _this.params.subjectId;
				_this.listLoading = true;
				that.ajax({
					url: '/areaSubject/pageAreaSubjectEntList?ticketId=' + that.params.ticketId +
						'&pageIndex=' + _this
						.pageIndex + '&pageSize=' + _this.pageSize,
					dataType: 'json',
					data: JSON.stringify(param),
					contentType: 'application/json',
					success: function(result) {
						_this.listLoading = false;
						if (result.status == 1 && result.data) {
							_this.total = result.data.pages.totalRecord;
							_this.tableData = result.data.list;
						} else {
							_this.tableData = [];
							_this.total = 0;
						}
					}
				})
			},

			handleSizeChange: function(val) {
				this.pageIndex = 1;
				this.pageSize = val;
				this.getList();
			},
			handleCurrentChange: function(val) {
				this.pageIndex = val;
				this.getList();
			},

		}
	}
</script>
